<template>
  <div class="user">
      <!-- 头部区域 -->
      <van-nav-bar title="个人信息" class="user-info">
          <van-button slot="left" icon="arrow-left" @click="$router.back()"></van-button>
      </van-nav-bar>
      <!-- 主题区域 -->
    <input type="file" hidden ref="files" @change="onChangeFile"/>
    <van-cell class="info-wrap" clickable @click="$refs.files.click()">
        <div slot="title">头像</div>
        <van-image
            class="info-wrap-tip img"
            :src="profileinfo.photo"
            round
        />
        <van-icon  name="arrow" />
    </van-cell>
    <van-cell  class="info-wrap" clickable  @click="isNickNameShow=true">
        <div slot="title">昵称</div>
        <span class="info-wrap-tip">{{profileinfo.name}}</span>
        <van-icon  name="arrow" />
    </van-cell>
    <van-cell @click="isSexShow=true" class="info-wrap" clickable>
        <div slot="title">性别</div>
        <span class="info-wrap-tip">{{profileinfo.gender?'女':'男'}}</span>
        <van-icon  name="arrow" />
    </van-cell>
    <van-cell @click="isDateShow=true" class="info-wrap" clickable>
        <div slot="title">生日</div>
        <span class="info-wrap-tip">{{profileinfo.birthday}}</span>
        <van-icon  name="arrow" />
    </van-cell>
    <!-- 展示图片文本选择框弹出层 -->
    <van-popup v-model="isPhotoShow" position="bottom" :style="{height: '100%'}">
      <UpdatePhoto :img="img" @cancel="onPhotoCancel" v-if="isPhotoShow" @update-photo="profileinfo.photo=$event"/>
    </van-popup>
    <!-- 昵称弹出层 -->
    <van-popup v-model="isNickNameShow"  position="bottom" :style="{ height: '100%' }" >
      <UpdateName v-if="isNickNameShow" v-model="profileinfo.name" @cancel="isNickNameShow=false" class="user-nickname-popup"/>
    </van-popup>
    <!-- 性别弹出层 -->
    <van-popup v-model="isSexShow"  position="bottom">
      <UpdateSex @cancel="isSexShow=false" v-if="isSexShow"  v-model="profileinfo.gender"/>
    </van-popup>
    <!-- 生日弹出层 -->
    <van-popup v-model="isDateShow" position="bottom">
      <UpdateDate @cancel="isDateShow=false" v-if="isDateShow" v-model="profileinfo.birthday"/>
    </van-popup>
  </div>
</template>

<script>
import UpdateName from './components/update-name.vue'
import UpdateSex from './components/update-sex.vue'
import UpdateDate from './components/update-date.vue'
import UpdatePhoto from './components/update-photo.vue'
import { getProfileInfo } from '@/api/user'
export default {
  name: 'user',
  components: {
    UpdateName,
    UpdateSex,
    UpdateDate,
    UpdatePhoto
  },
  props: {},
  data () {
    return {
      // 用户个人资料
      profileinfo: {},
      // 昵称
      isNickNameShow: false,
      isDateShow: false,
      // 性别
      isSexShow: false,
      // 图片文本选择框,
      isPhotoShow: false,
      img: null
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadProfileInfo()
  },
  mounted () {},
  methods: {
    // 获取用户个人资料
    async loadProfileInfo () {
      try {
        const { data } = await getProfileInfo()
        this.profileinfo = data.data
      } catch (err) {

      }
    },
    onChangeFile () {
      var files = this.$refs.files.files[0]
      var fileURL = window.URL.createObjectURL(files)
      this.img = fileURL
      this.isPhotoShow = true
      this.$refs.files.value = ''
    },
    onPhotoCancel () {
      this.isPhotoShow = false
      this.img = ''
    }
  }
}
</script>

<style lang="less" scoped>
    .user{
        /deep/.user-info {
            background-color: #3296fa;
            .van-nav-bar__title{color: #fff;}
            .van-nav-bar__left{padding: 0}
            .van-button{
                background-color: #3296fa;border: none;
                &::before{background-color: unset;}
                .van-icon-arrow-left{
                    color: #fff;
                }
            }
        }
        .info-wrap{
            display: flex;
            align-items: center;
            .van-cell__value{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .info-wrap-tip{
                    margin-right: 10px;
                }
                .img{
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
</style>
